/* components/navbar/index.wxss */

.navbar-container  {
    background-color: var(--navbar-background-color, #fff);
    height: var(--navbar-height, 35px);
    line-height: var(--navbar-height, 35px);
    text-align: center;
    z-index: 100;
    position: relative;

    &.navbar--fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    &.navbar--transparent {
        background-color: transparent !important;
        .navbar-left, .navbar-right {
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            color: #fff !important;
            z-index: 100;
            .iconfont {
                color: #fff;
            }
        }
    }

    .navbar-content {
        height: 100%;
        padding: 0 6rpx;
        position: relative;
    }

    .navbar-left, .navbar-right {
        width: 66rpx;
        height: 66rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        float: right;
        // 使用了导航标题，点击图标后没有反应的情况
        z-index: 10;
        pointer-events: auto;
        .iconfont {
            font-size: 46rpx;
            font-weight: bold;
        }
        .icon-home {
            font-weight: normal;
        }
    }

    .navbar-center-title {
        position: absolute;
        width: 100%;
        text-align: center;
        height: inherit;
        // 使用了导航标题，点击图标后没有反应的情况
        z-index: 10;
        pointer-events: none;
    }

    .navbar-center-input {
        height: inherit;
        font-size: 28rpx;
        margin-left: 10rpx;

        .center-input {
            display: flex;
            align-items: center;
            height: inherit;
            background-color: #eee;
            border-radius: 10rpx;
            overflow: hidden;
            text-align: left;
            position: relative;
            .iconfont {
                font-size: 30rpx;
                color: #8d8d8d;
                padding: 0 16rpx;
            }
            .icon-delete_fill {
                font-size: 40rpx;
            }
            .input {
                height: inherit;
                width: 100%;
                font-size: 30rpx;
                margin-right: 4rpx;
            }
            .input-placeholder {
                color: #8d8d8d;
                font-size: 30rpx;
            }
            .search-btn {
                white-space: nowrap;
                padding: 0 10rpx;
                background-color: var(--primary-color);
                color: #fff;
                font-size: 28rpx;
            }
        }
    }


}